<template>
  <div class="banner">
    <div>
      <div class="text">
        <el-icon><Bell /></el-icon>
        <span>张三，早安！美好的一天又要开始了！</span>
      </div>
    <div>
    <div class="block text-center" m="t-4">
      <el-carousel :autoplay="true" trigger="click" width="100%" height="260px">
        <el-carousel-item v-for="item,index in urls" :key="item">
          <img :src="item.url" alt="">
          <!-- <el-image class="img" :src="item.url" fit="scale-down" /> -->
          <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
        </el-carousel-item>
      </el-carousel>
    </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const urls = ref([
  {url:'https://img2.baidu.com/it/u=526965,3657641906&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=360'},
  {url:'https://img1.baidu.com/it/u=1377704352,1998146276&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'},
  {url:'https://img95.699pic.com/xsj/17/av/iw.jpg%21/fh/300'},
  {url:'https://q7.itc.cn/images01/20250115/195600715b354c71bfbbe254a0fb2792.png'},
])
</script>

<style lang="scss">
@import 'bootstrap/dist/css/bootstrap.min.css';
.banner{
  height: 280px;
  overflow: hidden;
}
img{
  width: 100%;
  
}
.text{
  position: relative;
  left: 0;
  height: 50px;
  line-height: 45px;
  padding-left: 20px;
  background-color: white;
  text-align: left;
  border-radius: 8px 8px 0 0;
  .el-icon {
    margin-right: 5px;
    font-size: 20px;
    color: #969a9d;
    vertical-align: middle;
  }
}
</style>